<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品交接单</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <script src="/js/axios.min.js"></script>
    <script src="/js/vue.js"></script>
    <script src="/js/qs.min.js"></script>
    <script src="/js/jquery.js"></script>

    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<h3>交接单列表</h3>
<div id="app">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="交接单查询">
            <el-input v-model="formInline.id" placeholder="请输入订单号"></el-input>
        </el-form-item>
        <el-form-item label="入库时间">
            <el-date-picker
                    v-model="formInline.date"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期">
            </el-date-picker>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>

    <el-button style="margin-top: 10px;" type="primary" icon="el-icon-edit" round @click="dialogFormVisible = true">新增交接单</el-button>
    <el-button style="margin-top: 10px;" icon="el-icon-plus" round @click="">打印交接单</el-button>
    <el-button style="margin-top: 10px;" type="danger" icon="el-icon-delete" round @click="handleDelete">批量删除</el-button>
        <el-table style="width: 100%"
                  :data="Page.data"
                  ref="phsTable"
                  @selection-change="handleSelectionChange"
                  row-key="id">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column label="交接单号">
                <template slot-scope="scope">
                    <span>{{ scope.row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column label="商品编号">
                <template slot-scope="scope">
                    <span>{{ scope.row.comId }}</span>
                </template>
            </el-table-column>
            <el-table-column label="订单编号">
                <template slot-scope="scope">
                    <span>{{ scope.row.order2.orderId }}</span>
                </template>
            </el-table-column>
            <el-table-column label="产品名称">
                <template slot-scope="scope">
                    <span>{{ scope.row.commodity.pname }}</span>
                </template>
            </el-table-column>
            <el-table-column label="产品型号">
                <template slot-scope="scope">
                    <span>{{ scope.row.commodity.pbrand }}</span>
                </template>
            </el-table-column>
            <el-table-column label="生产部门">
                <template slot-scope="scope">
                    <span>{{ scope.row.department.dName }}</span>
                </template>
            </el-table-column>
            <el-table-column label="收货仓库">
                <template slot-scope="scope">
                    <span>{{ scope.row.tmenu.wareName }}</span>
                </template>
            </el-table-column>
            <el-table-column label="入库数量">
                <template slot-scope="scope">
                    <span>{{ scope.row.num }}</span>
                </template>
            </el-table-column>
            <el-table-column label="交接日期">
                <template slot-scope="scope">
                    <span>{{ scope.row.handoverDate}}</span>
                </template>
            </el-table-column>
            <el-table-column label="交接人">
                <template slot-scope="scope">
                    <span>{{ scope.row.staff.name }}</span>
                </template>
            </el-table-column>
            <el-table-column label="备注">
                <template slot-scope="scope">
                    <span>{{ scope.row.remake }}</span>
                </template>
            </el-table-column>
            <el-table-column label="状态(1:已完成 0:未完成)">
                <template slot-scope="scope">
                    <span>{{ scope.row.state }}</span>
                </template>
            </el-table-column>

            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="success" @click="handleEdit(scope.$index, scope.row)">修改状态</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="block" style="margin-top: 10px;">
            <span class="demonstration">跳转</span>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="current"
                    :page-sizes="pageSizes"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="Page.count">
            </el-pagination>
        </div>
    <!--添加数据模态框-->
    <el-dialog title="交接单操作" :visible.sync="dialogFormVisible" width="500px" @close="">
        <el-form :model="currentPh">

            <el-form-item label="订单号">
                <el-select v-model="order2Id" placeholder="请选择" @change="comIdChange">
                <el-option v-for="o in order2" :key="o.id" :label="o.orderId" :value="o.id"></el-option>
            </el-select>
            </el-form-item>

            <el-form-item label="仓库">
                <el-select v-model="currentPh.depotId" placeholder="请选择">
                    <el-option v-for="m in tMenu" :key="m.id" :label="m.wareName" :value="m.id"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="数量">
                <el-input v-model="currentPh.num" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>

            <el-form-item label="交接时间">
                <el-input type="date" v-model="currentPh.handoverDate" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="交接人">
                <el-select v-model="currentPh.staffId" placeholder="请选择">
                    <el-option v-for="s in staff" :key="s.id" :label="s.name" :value="s.id"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="备注">
                <el-input
                        type="textarea"
                        :rows="2"
                        placeholder="请输入内容"
                        v-model="currentPh.remake">
                </el-input>
            </el-form-item>

            <el-form-item label="状态">
                <el-select v-model="currentPh.state" placeholder="请选择">
                    <el-option  label="已处理" value="1"></el-option>
                    <el-option  label="未处理" value="0"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="订单类型">
                <el-input v-model="currentPh.type" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="savePh">确定添加</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                //分页数据
                Page:[],
                // 当前页数
                current:1,
                // 每页的数据
                pageSizes:[5,10,20,50],
                // 当前每页的数据
                pageSize:5,
                // 分页背景
                back: true,
                // 添加交接单模态框
                dialogFormVisible: false,
                // 套提交的表单数据
                currentPh: {
                    id:"",comId:"",depotId:"",staffId:"",num:"",handoverDate:"",head:"",remark:"",state:"",type:"",order2Id:""
                },
                //需要交接的订单数据
                order2:[],
                //部门信息
                department:[],
                //员工信息
                staff:[],
                //仓库信息
                tMenu:[],
                //订单id用于查询显示对应的下拉框数据
                order2Id:"",
                //批量删除的交接单id集合
                delThird:[],
                //当前选中的行
                current0:[],
                formInline:{
                    id:"",date:""
                }
            }
        },
        methods: {
            // 加载交接单
            loadPhs:function(){
                axios.get("/ProductHandovers?current="+this.current+"&PAGE_SIZE="+this.pageSize+"&orderId="+this.formInline.id+"&handoverDate="+this.formInline.date)
                    .then(res=>{
                        this.Page = res.data;
                        console.log(res.data);
                    });
            },
            //加载需要交接的订单数据
            loadOrder2:function(){
                axios.get("/order2s")
                    .then(res=>{
                        this.order2 = res.data;
                    });
            },
            //加载需要交接的仓库数据
            loadTMenu:function(){
                axios.get("/menus")
                    .then(res=>{
                        this.tMenu = res.data;
                    });
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.loadPhs();
            },
            handleCurrentChange(val) {
                this.current = val;
                this.loadPhs();
            },
            //添加交接单
            savePh() {
                if(this.currentPh.handoverDate){
                    this.currentPh.order2Id=this.order2Id;
                    axios.post("/ProductHandover/"+this.order2Id, this.currentPh)
                        .then(res => {
                            if(res.data === "ok"){
                                this.$message("添加成功!");
                                this.loadOrder2();
                                this.loadPhs();
                            }
                        });
                    this.dialogFormVisible = false;
                    //重新加载待入库订单
                    this.loadOrder2();
                    //数据清空
                    this.currentPh={
                            id:"",comId:"",depotId:"",staffId:"",num:"",handoverDate:"",head:"",remark:"",state:"",type:"",order2Id:""
                        };
                    this.order2Id="";
                }else {
                    this.$message("日期不能为空!");
                }
            },
            // 删除交接单
            handleDelete() {
                this.$confirm("此操作将删除信息，是否继续？","提示",{
                    confirmButtonText:"确定",
                    cancelButtonText:"取消",
                    type:'warning'
                }).then(async()=>{
                    this.multipleSelection.forEach(item =>{
                        if(item.id){
                            this.delThird.push(item.id);
                        }
                    });
                    axios.delete("/ProductHandover?delThird="+this.delThird)
                        .then(res =>{
                            if(res.data === "ok"){
                                this.$message("删除成功!");
                                this.loadPhs(this.current);
                                this.delThird=[];
                            }
                        })
                });
            },
            //拿到勾选的数据
            handleSelectionChange(val){
              this.multipleSelection = val;
              for (let i = 0;i < this.multipleSelection.length; i++){
                  this.tablemultiple = this.multipleSelection[i]
              }
              return this.tablemultiple
            },
            //添加选择订单号发生改变时
            comIdChange(val){
                axios.get("/order2/"+this.order2Id)
                    .then(res=>{
                        this.currentPh.comId=res.data.productId;
                        this.currentPh.num=res.data.number;
                    });
                axios.get("/department/"+val)
                    .then(res=>{
                        this.department=res.data;
                        axios.get("/staffs/"+this.department.id)
                            .then(res=>{
                                this.staff = res.data;
                        })
                    });
            },
            handleEdit(index, row){
                axios.put("/ProductHandover/"+row.id+"/"+row.order2Id)
                    .then(res=>{
                        if(res.data === "ok"){
                            this.loadPhs();
                            this.$message("修改成功!");
                        }
                    });
            },
            onSubmit(){
                axios.get("/ProductHandovers?current="+this.current+"&PAGE_SIZE="+this.pageSize+"&orderId="+this.formInline.id+"&handoverDate="+this.formInline.date)
                    .then(res=>{
                        this.Page = res.data;
                    });
            },

        },

        mounted() {
            this.loadOrder2();
            this.loadTMenu();
            this.loadPhs();
        }
    });
</script>
</html>